<template>
  <view class="content">
    <view class="detail">
      <view class="list">
        <view v-for="(item, index) in list" :key="index">
          <view class="item" @click="goInfo(item)">
            <u-image :src="handleUrl(item)" mode="aspectFill" radius="4" width="260rpx" height="170rpx"></u-image>
            <view class="item-desc">
              <view class="item-desc-title">{{ item.title || '' }}</view>
              <view class="item-desc-address">{{ item.address || '' }}</view>
            </view>
          </view>
        </view>
        <u-loadmore v-if="list.length === 0" status="nomore" nomoreText="暂无数据" />
        <u-loadmore v-if="refreshing" status="loading" loading-text="加载中..." />
        <u-loadmore v-if="finished && list.length > 0" status="nomore" nomoreText="我是有底线的" />
      </view>
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex'
import communityApi from '../request/api/community'
import config from '../request/config'
export default {
  data() {
    return {
      // 发布用户id
      userId: null,
      list: [], // 列表数据
      finished: false, // 是否已加载全部数据
      refreshing: false, // 是否正在刷新
      params: {
        pageNum: 1,
        pageSize: 10,
        type: 3,
        status: 1,
      },
      total: 0,
      baseUrl: config.baseUrl,
    }
  },
  computed: {
    ...mapState('userInfo', 'user'),
  },
  onLoad(option) {
    this.userId = option.userId
    this.getList()
  },
  // 下拉刷新
  onPullDownRefresh() {
    this.params.pageNum = 1
    this.list = []
    this.getList()
  },
  // 上划加载
  onReachBottom() {
    if (this.list.length < this.total) {
      this.getList()
    }
  },
  methods: {
    async getList() {
      this.refreshing = true
      if (this.userId) {
        // 查询指定发布用户的数据
        this.params.userId = this.userId
      }
      try {
        var { rows, total } = await communityApi.getList(this.params)
      } catch (error) {
        return
      } finally {
        this.refreshing = false
        uni.stopPullDownRefresh()
      }
      this.list = [...this.list, ...rows]
      this.total = total
      if (this.list.length >= this.total) {
        this.finished = true
      } else {
				this.params.pageNum++
      }
    },
    handleUrl({ images }) {
      return images.split(",")[0] ? config.baseUrl + images.split(",")[0] : ''
    },
    goInfo(item) {
      uni.navigateTo({
        url: `/lawyer/detail?id=${ item.postId }`
      });
    }
  }
}
</script>

<style scoped lang="scss">
.content {
  box-sizing: border-box;
}

.detail {
  box-sizing: border-box;
}

.list {
  overflow-y: auto;

  .item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 20rpx !important;
    padding: 20rpx;
    background-color: #fff;
    height: 170rpx;

    &:last-child {
      margin-bottom: 0;
    }

    .item-desc {
      width: 60%;
      height: 100%;
      display: flex;
      flex-direction: column;

      .item-desc-title {
        color: #909399;
        margin-bottom: 15rpx;
        display: -webkit-box; /* 使用 WebKit 盒模型 */
        -webkit-box-orient: vertical; /* 设置盒模型的方向为垂直 */
        -webkit-line-clamp: 2; /* 设置显示的行数，这里设置为3行 */
        overflow: hidden; /* 隐藏溢出的内容 */
        text-overflow: ellipsis; /* 使用省略号显示溢出的文本 */
      }

      .item-desc-address {
        margin-top: auto;
        font-size: 24rpx;
        color: #909399;
        white-space: nowrap; /* 防止文本换行 */
        overflow: hidden; /* 隐藏溢出的内容 */
        text-overflow: ellipsis; /* 使用省略号显示溢出的文本 */
      }
    }
  }
}
</style>
